<template>
	<view>
		<u-tabs :list="nav" :is-scroll="false" :current="current" @change="change"></u-tabs>
		
		<view class="coupon-box" v-for="(item,key) in list">
			<view class="price">
				<text>￥{{item.price}}</text>
			</view>
			<view class="coupon-info">
				<text class="coupon-title">{{item.coupon.name}}</text>
				<text class="coupon-description">有效期至{{$u.timeFormat(item.endtime)}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				nav: [{
					name: '全部'
				}, {
					name: '未使用'
				}, {
					name: '已使用',
				}, {
					name: '已过期',
				}],
				current: 0,
				list:[],
				
			}
		},
		
		onLoad(){
			this.getDatas();
		},
		
		methods: {
			getDatas(){
				uni.$u.http.get("mall/coupon/my",{
					status:this.current
				}).then(res => {
					this.list = res.data;
				})
			},
			change(val){
				this.current = val;
				this.getDatas();
			}
		}
	}
</script>

<style lang="scss">
	.coupon-box{
		height: 198rpx;
		background-color: #FFFFFF;
		margin: 32rpx;
		border-radius: 16rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		.price{
			height: 198rpx;
			width: 198rpx;
			background-color: #187ee6;
			color: #FFFFFF;
			line-height: 198rpx;
			text-align: center;
			font-size: 50rpx;
		}
		.coupon-info{
			display: flex;
			flex: 1;
			height: 198rpx;
			justify-content: center;
			margin-left: 22rpx;
			.coupon-title{
				font-size:36rpx; margin-bottom: 40rpx;
			}
			.coupon-description{
				color: #9d9d9d; font-size: 24rpx;
			}
		}
	}
	
	.coupon-info{
		display: flex;
		flex-direction: column;
	}
</style>
